<template>
	<div class="Footer">
		<div class="footerTop">
			<div class="w1200">
				<div class="footerNav fl">
					<dl>
						<dt>关于我们</dt>
						<router-link tag="dd" :to="{name:'About'}">公司简介</router-link>
						<router-link tag="dd" :to="{name:'Contact'}">联系我们</router-link>
					</dl>
					<dl>
						<dt>主要服务</dt>
						<dd><a :href="entUrl" target="_blank">企业招聘</a></dd>
						<router-link tag="dd" :to="{name:'Job'}">人才招聘</router-link>
					</dl>
					<dl>
						<dt>使用与帮助</dt>
						<router-link tag="dd" :to="{name:'Agreement'}">用户协议</router-link>
						<router-link tag="dd" :to="{name:'Privacy'}">隐私政策</router-link>
						<router-link tag="dd" :to="{name:'Legal'}">法律声明</router-link>
					</dl>
				</div>
				<div class="qr fr">
					<div class="title">黄河人才网</div>
					<div class="box">
						<img src="../assets/qr.jpg">
						<div class="text">扫描关注，<br/>随时获取最新消息</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footerBottom">
			<div class="w1200">
				<div class="copyRight fl">Copyright © 2020  黄河人才网
					<a href="http://beian.miit.gov.cn/" target="_blank">豫ICP备19003500号-2</a>
					<a  style="float:right;margin-left: 20px; " target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41010502004793" >
						<img src="../assets/beian.png"style="display: inline-block;" />
						<span style="margin-left: 10px;">豫公网安备 41010502004793号</span></a>
				</div>
<!--				<div style="width:300px;margin:0 auto; padding:20px 0;">-->
<!--					<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41010502004793" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">豫公网安备 41010502004793号</p></a>-->
<!--				</div>-->
				<div class="friendLink fr">
					<div class="label">友情链接：</div>
					<div class="box">
						<div class="active"><a target="_blank" href="http://www.hnic.com.cn/">河南投资集团有限公司</a></div>
						<dl>
							<dd><a target="_blank" href="http://www.hnic.com.cn/">河南投资集团有限公司</a></dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
		<!-- 右侧悬浮 -->
		<div class="fixedRight">
			<router-link tag="div" class="item" :to="{name:'Contact'}">
				<i class="el-icon-headset"></i>
				<p>联系我们</p>
			</router-link>
			<div class="item" @click="messageForm">
				<i class="el-icon-edit-outline"></i>
				<p>留言</p>
			</div>
			<div class="item">
				<i class="el-icon-upload2"></i>
				<p>返回顶部</p>
				<el-backtop :visibility-height="0"></el-backtop>
			</div>
		</div>
		<!-- 留言表单 -->
		<el-dialog title="在线留言" width="600px" class="messageForm" :visible.sync="messageFormFlag" @close="messageFormFlag=false">
			<el-form :model="form" ref="form" :rules="rules">
				<el-form-item prop="content">
					<el-input type="textarea" v-model="form.content" placeholder="您想说点什么"></el-input>
				</el-form-item>
				<el-form-item style="margin-bottom: 0">
					<el-button type="primary" class="btn" @click="submit">提交</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import {formMessage} from '@/api/api'
	export default {
		//组件注入
		components: {},
		//存放数据
		data() {
			return {
				messageFormFlag: false,//留言表单弹出
				form:{
					content:'',
				},
				rules:{
					content: [
                        { required: true, message: '请填写留言内容',},
                    ],
				},
				userInfo:{},
			}
		},
		//监控data中的数据变化
		watch: {},
		//方法集合
		methods: {
			//打开留言
			messageForm(){
				if(this.userLoginFlag()){
					this.messageFormFlag = true
				}
			},
			//提交留言
			submit(){
				this.$refs.form.validate((valid) => {
                    if(valid) {
						formMessage({
							'sendId': this.userInfo.userId,
							'sendPhone':this.userInfo.phone,
							'sendRealname':this.userInfo.name,
							'newsContent':this.form.content,
						}).then(res =>{
							if(res.code==200){
								this.$message.success('提交成功');
								this.messageFormFlag = false
							}else{
								this.$message.error(res.message);
							}
						});
					}
				});
			}
		},
		//生命周期 - 创建完成（可以访问当前this实例）
		created() {},
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
		},
   };
</script>
<style lang="scss">
	@mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	@mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
	@mixin transition{transition: all .3s;}
	.Footer{height: auto;overflow: hidden;background: #3B3A3A;
		.footerTop{width: 100%;height: auto;overflow: hidden;
			.footerNav{height: auto;overflow: hidden;padding: 40px 0;
				dl{height: auto;overflow: hidden;float: left;margin-left: 170px;
					dt{font-size: 16px;color: #fff;font-weight: bold;margin-bottom: 25px;}
					dd{font-size: 14px;color: #949494;margin-top: 20px;cursor: pointer;@include transition();
						a{font-size: 14px;color: #949494;
							&:hover{color: #fff;}
						}
						&:hover{color: #fff;}
					}
					&:first-child{margin: 0;}
				}
			}
			.qr{width: 390px;height: 270px;overflow: hidden;background: #403F3F;padding: 40px 60px;
				.title{font-size: 16px;color: #fff;font-weight: bold;margin-bottom: 30px;}
				.box{height: auto;overflow: hidden;
					img{width: 95px;height: 95px;float: left;margin-right: 20px;}
					.text{font-size: 14px;color: #a5a5a5;line-height: 20px;padding: 25px 0;}
				}
			}
		}
		.footerBottom{width: 100%;height: 100px;border-top: 1px solid rgba($color: #eee, $alpha: .08);padding: 30px 0;
			.copyRight{height: 40px;line-height: 40px;font-size: 14px;color: #999;
				a{color: #999;}
			}
			.friendLink{height: 40px;line-height: 40px;text-align: center;
				.label{font-size: 14px;color: #999;display: inline-block;}
				.box{width: 221px;height: 40px;background: #434343;font-size: 14px;color: #999;display: inline-block;text-align: left;position: relative;
					.active{padding: 0 15px;cursor: pointer;@include transition();position: relative;
						a{color: #999;
							&:hover{color: #fff;}
						}
						&:after{content: "";width: 100%;height: 1px;background: rgba($color: #eee, $alpha: .08);position: absolute;left: 0;top: 0;}
					}
					dl{height: 0;max-height: 260px;overflow: hidden;width: 221px;position: absolute;right: 0;bottom: 40px;background: #434343;
						dd{padding: 8px 15px;line-height: normal;cursor: pointer;@include transition();
							a{color: #999;
								&:hover{color: #fff;}
							}
						}
					}
					&:hover{
						dl{height: auto;overflow: auto;padding: 8px 0;}
					}
					::-webkit-scrollbar{width: 5px;}
					::-webkit-scrollbar-track{background: #434343}
					::-webkit-scrollbar-track:hover{background: #434343}
					::-webkit-scrollbar-thumb{border-radius: 0;background: #555}
					::-webkit-scrollbar-thumb:hover{background: #666}
					::-webkit-scrollbar-corner{background: 0 0}
				}
			}
		}
		.fixedRight{height: auto;overflow: hidden;position: fixed;right: 0;bottom: 30%;box-shadow: 0px 2px 6px rgba(143, 143, 143, 0.16);
			.item{width: 80px;height: 80px;text-align: center;background: #fff;padding-top: 15px;border-bottom: 1px solid #eee;cursor: pointer;position: relative;
				i{font-size: 24px;color: #666;margin-bottom: 5px;;}
				p{font-size: 12px;color: #666;}
				&:last-child{border: 0;}
				.el-backtop{width: 80px;height: 80px;bottom: 0 !important;right: 0 !important;opacity: 0;position: absolute;}
			}
		}
		.messageForm{
			textarea{height: 200px;border-radius: 0;}
			.btn{width: 180px;margin: 0 auto;display: block;}
		}
	}
</style>
